<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            姓名：<input type="text" placeholder="默认" v-model="username" />{{username}}
        </div>
        <br />
        <div>年龄： <input type="text" v-model="userage" />{{userage}}</div>

        <br />
        <div>
            爱好：
            <input type="text" placeholder="喜欢篮球" v-model="hobby" />
        </div>
        <ul>
            <li v-for="item in list" :key="item">
                {{username}}{{userage}}{{hobby}},
            </li>
        </ul>
        <div>
            <select v-model="city">
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="wh">武汉</option>
        </select> {{city}}
        </div>
        <br />
        <input type="checkbox" v-model="ischeck" />{{ischeck}}
        <br />
        <div>
            <h3>性别：</h3>
            <h4>男： <input type="radio" value="n" v-model="gender" /></h4>
            <h4>女：<input type="radio" value="v" v-model="gender" /></h4>
            <hr />
            <button @click="gethobby">点击</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                city: "wh",
                ischeck: true,
                gender: "n",
                list: [],
                hobby: "",
                username: "",
                userage: "",

                user: {
                    name: "",
                    age: "",
                    hobby: "",
                },
            },
            methods: {
                gethobby() {
                    console.log("(" + this.user.hobby + ")");
                    this.list.push({
                        name: this.username,
                        age: this.userage,
                        hobby: this.hobby,
                    });
                },
            },
        });
    </script>
</body>

</html>